﻿@*@using BusinessClasses.AttachmentTypeEnum*@
@using BusinessClasses
@model BusinessClasses.SubCategoryModel
@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var t = AttachmentType.Image;
}
@*<div class="col-lg-pull-10">
        <div class="embed-responsive embed-responsive-4by3">
            <video style="height: 50%;width: 40%;" class="embed-responsive-item" src="~/Content/Video/testVideo.mp4"></video>
        </div>
    </div>*@
<style>
    .bx-wrapper .bx-prev {
        left: 10px !important;
    }
</style>
<head>
    <title>Video.js | HTML5 Video Player</title>
    <link href="~/Content/jquery.bxslider.css" rel="stylesheet" />
    <script src="~/Scripts/jquery.bxslider.js"></script>
    <link href="~/Content/video-js.css" rel="stylesheet" />
    <script src="~/Scripts/video.js"></script>
</head>
<div>
    <h1 style="text-align: center;">@Model.Title</h1>
    <div class="pull-left" style="margin-bottom: 5px;width:46%;">
        @*<td colspan="2">*@
<video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls
       preload="auto" width="480px" height="264" poster="MY_VIDEO_POSTER.jpg"
       data-setup="{}">
    @if (Model.Attachments != null)
    {
    foreach (var item in Model.Attachments)
    {
        var flag = true;
    if (item.FileType.Equals(BusinessClasses.AttachmentType.Video) && flag == true)
    {
        <source src="@(Url.Content("~/AttachmentUploads/" + (item.FileName)))" type='video/mp4'>
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href='@Url.Content("~/")' target="_blank">supports HTML5 video</a></p>
    flag = false;
    }
    }
    }

</video>

        @*</td>
            <td colspan="3">*@
        @* </td>*@
    </div>
    <div class="right">
        @Model.Description
    </div>

    <div class="pull-left" style="border: 2px solid #cbcdcc; margin-left: 18px;">
        <ul class="bxSlider" style="height:10%;width:10%;margin-left:4px;">
            @if (Model.Attachments != null) 
            { 
                foreach (var item in Model.Attachments)
                {
                     if (item.FileType == BusinessClasses.AttachmentType.Image)
                     {
                        <li class="border"><img src="@(Url.Content("~/AttachmentUploads/" + (item.FileName)))" /></li>
                     }
                }
            }
            @*<li class="border"><img src="~/Content/Images/Gallery/Eiffel-Tower-lanscape-Wallpaper-HD2.jpg" /></li>
                <li class="border"><img src="~/Content/Images/Gallery/railay-beach-thailand-beach-hd-wallpaper-1920x1200-10919.jpg" /></li>
                <li class="border"><img src="~/Content/Images/Gallery/rainy-weather-hd-wallpaper1.jpg" /></li>
                <li class="border"><img src="~/Content/Images/Gallery/wallpaper-desktop-nacozinhacomamalves-blogspot-com-moth_-_desktop_wallpaper.jpg" /></li>
                <li class="border"><img src="~/Content/Images/Gallery/wallpaper-hd-3151.jpg" /></li>
                <li class="border"><img src="~/Content/Images/Gallery/wallpaper-one-1600-1200.jpg" /></li>*@
        </ul>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('.bxSlider').bxSlider({ minSlides: 1, maxSlides: 4, slideWidth: 194, slideMargin: 10, adaptiveHeight: true, auto: true, autoControls: true });
    });

</script>